import React, { useState, useRef } from 'react';
import { Card, Button, Space, message } from 'antd';
import AiEditorComponent from '../components/AiEditorComponent';

const AiEditorTest = () => {
  const [content, setContent] = useState('<h1>AiEditor 测试页面</h1><p>这是一个面向 AI 的开源富文本编辑器。</p>');
  const editorRef = useRef(null);

  const handleContentChange = (newContent) => {
    setContent(newContent);
    console.log('内容变化:', newContent);
  };

  const handleGetContent = () => {
    const currentContent = editorRef.current?.getContent();
    message.info('当前内容已输出到控制台');
    console.log('当前内容:', currentContent);
  };

  const handleSetContent = () => {
    const newContent = '<h2>通过代码设置的内容</h2><p>这是通过 setContent 方法设置的内容。</p>';
    editorRef.current?.setContent(newContent);
    setContent(newContent);
  };

  const handleFocus = () => {
    editorRef.current?.focus();
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <Card title="AiEditor 测试页面" style={{ marginBottom: '20px' }}>
        <Space style={{ marginBottom: '16px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
          <Button onClick={handleSetContent}>设置内容</Button>
          <Button onClick={handleFocus}>聚焦编辑器</Button>
        </Space>
        
        <AiEditorComponent
          ref={editorRef}
          value={content}
          onChange={handleContentChange}
          placeholder="开始使用 AiEditor 编写内容..."
          height="500px"
        />
        
        <div style={{ marginTop: '20px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '6px' }}>
          <h4>当前内容预览:</h4>
          <div dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      </Card>
    </div>
  );
};

export default AiEditorTest;